<template>
    <div class="page ">

        <div class="content-activity">
            <van-swipe :autoplay="3000" indicator-color="" class="swipe">
                <van-swipe-item v-for="item,index in swipeImgUrls" :key="index">
                    <a :href="item.aurl" ><img :src="item.url"></a>
                    <div class="clearboth"></div>
                </van-swipe-item>
            </van-swipe>
        </div>

       <!-- <div class="group_slider" id="banner">
            <ul>
                <li>
                    <a href="https://mallshow.mallshow.net/wx/activity/detail.html?activity_id=100616164000101">
                        <img src="http://sqqimg.b0.upaiyun.com/2016/09/09/6a71d00dcb96478484c841553d6a1bd010.jpg!P5">
                    </a>
                </li>
            </ul>
        </div>-->
        <van-tabs v-model="active" color="#76DCE1" @click="typeSelect">
            <van-tab :title="typeVal"></van-tab>
            <van-tab title="进行中"></van-tab>
            <van-tab title="未开始"></van-tab>
            <van-tab title="已结束"></van-tab>
        </van-tabs>

        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad">
            <div class="section">
                <div class="tablist" maxpage="10">
                    <div class="section">
                        <div class="mydoing">
                            <ul>
                                <li v-for="item,index in mallActivityLists" :key="index">
                                    <a @click="goToView('/shopdetail',item.id)">
                                        <img class="lazy2_1" :src="item.url" :style="winHeight">
                                        <p class="cliptxt">{{item.title}}</p>
                                        <span :class="item.status==1?'begin':item.status==2?'soon':'ongoing'">{{item.statusText}}</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>

        <van-popup v-model="typeShow" position="bottom" :overlay="false">
            <van-picker
                    show-toolbar
                    title="请选择"
                    :columns="typeBox"
                    @cancel="onCancel"
                    @confirm="onConfirm"
            />
        </van-popup>
    </div>
</template>

<script>
    import { Popup,Toast,Dialog} from 'vant';
    const limit = 5
    export default {
        name: "Shop",
        data(){
            return{
                active: 0,
                typeShow: false,
                typeBox: ['所有','商场活动','品牌优惠'],
                typeId:0,
                typeVal:'所有',
                mallActivityLists:[],
                pageNo:0,
                loading:false,
                finished:false,
                winHeight:{display: 'block',height:'187.5px'},
                /*轮播图片*/
                swipeImgUrls: []
            }
        },
        mounted(){
            this.mallActivityList()
            this.winHeight.height = document.body.clientWidth/2 + 'px'
            this.showAD()
        },
        methods:{
            /*类型选择*/
            typeSelect(){
                if(this.active == 0){
                    this.typeShow = !this.typeShow
                }else{
                    this.pageNo = 0
                    this.mallActivityLists = []
                    this.finished=false
                    this.mallActivityList()
                }
            },
            onConfirm(value, index) {
                this.typeVal = value
                this.typeId = index
                this.typeShow = !this.typeShow
                this.pageNo = 0
                this.mallActivityLists = []
                this.finished=false
                this.mallActivityList()
            },
            onCancel() {
                this.typeShow = !this.typeShow
            },
            mallActivityList(){
                var type = ''
                if(this.typeId == 1){
                    type = 0
                }else if (this.typeId == 2){
                    type = 1
                }

                var status = ''
                if(this.active == 0){
                    status = ''
                }else if(this.active == 1){
                    status = 0
                }else if(this.active == 2){
                    status = 1
                }else{
                    status = 2
                }
                this.$api.shop.shopActivityList({type: type,status: status,pageNo:this.pageNo,limit:limit}).then(res=>{
                    if(res.code==0){
                        this.loading=false
                        var data = JSON.parse(res.data)
                        var success = data.success
                        if(success){
                            this.mallActivityLists = this.mallActivityLists.concat(data.mallActivityJsonList)
                            this.pageNo++
                        }else{
                            this.finished=true
                        }
                    }
                }).catch(err=>{
                    console.log(err)
                })
            },onLoad(){
                if(this.pageNo >0) {
                    this.mallActivityList()
                }
            },goToView(path,id){
                // this.$router.push(path)
                this.$router.push({path:path,query:{id:id}})
            },
            showAD(){
                this.$api.advert.advertList({field:'isShow',value:'显示',type:'商场活动-轮播广告'}).then(res=>{
                    if(res.code==0){
                        var data = JSON.parse(res.data)
                        var success = data.success
                        var adverJsonList = data.adverJsonList
                        this.swipeImgUrls = adverJsonList
                    }
                }).catch(err=>{
                    console.log(err)
                })
            },
        }
    }
</script>


<style lang="less" >
    @import "../../assets/less/base";
    .page {
        max-width: 640px;
        background: #f1f5f8;
        position: relative;
        min-height: 100%;
        min-width: 320px;
        margin: 0 auto;
        font-size: 12px;
        padding: 0;
    }
    .group_slider {
        background: #ccc;
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .group_slider ul{
        display: table;
        overflow: hidden;
    }
    .group_slider li {
        width: 100%;
        position: relative;
        display: table-cell;
        vertical-align: top;
        list-style: none;
    }
    .group_slider li img {
        width: 100%;
    }
    .section {
        padding: 3% 3% 0 3%;
    }
    .mydoing {
        padding-bottom: 3%;
    }
    .mydoing ul li {
        background: #fff;
        border-radius: 15px;
        position: relative;
        margin-bottom: 3%;
        list-style: none;
    }
    .mydoing ul li img {
        width: 100%;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }
    .mydoing ul li p {
        font-size: 16px;
        padding: 2.5%;
        color: #627e94;
        margin: 0;
    }
    .mydoing ul li span.soon {
        background: url(/images/weixin2/soon.png) left top no-repeat;
    }
    .mydoing ul li span.begin {
        background: url(/images/weixin2/begin.png) left top no-repeat;
    }
    .mydoing ul li span.ongoing {
        background: url(/images/weixin2/ongoing.png) left top no-repeat;
    }
    .mydoing ul li span.soon, .mydoing ul li span.begin, .mydoing ul li span.ongoing {
        width: 84px;
        height: 84px;
        border-radius: 0;
        padding: 0;
        text-indent: -9999em;
        left: 0;
        top: 0;
    }
    .mydoing ul li span {
        position: absolute;
        color: #fff;
        font-size: 12px;
    }
    .logo{
        display: inline-block;
        background: url(/images/weixin2/arrowdown.png) no-repeat left center;
        background-size: 12px;
        width: 12px;
        height: 12px;
        vertical-align: middle;
        position: absolute;
        left: 20%;
        top: 36%;
        z-index: 999;
    }
</style>
